<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/views/taglibs.jsp" %>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style>
        .commentList {
            width: 100%;
        }

        .commentList .comment {
            position: relative;
            height: 70px;
        }

        .commentList .comment img {
            width: 40px;
        }

        .commentList .comment .conten {
            position: absolute;
            top: 0;
            left: 50px;
        }

        .commentList .comment .time {
            position: absolute;
            top: 17px;
            left: 50px;
        }

        .commentList .comment div {
            position: absolute;
            top: 40px;
            left: 50px;
        }

        .commentList .comment div .replyedUserName {
            color: green;
        }

        .head img {
            width: 70px;
            border-radius: 70px;
        }

        .head .right {
            position: absolute;
            top: 5px;
            left: 80px;
        }

        .head .right .top {
            top: 4px;
            font-size: 20px;
        }

        .head .right .bottom {
            position: absolute;
            top: 30px;
            width: 200px;
            font-size: 14px;
            color: #8c8c8c;
            margin-top: 5px;
        }

        .imgs {
            position: relative;
            margin-top: 10px;
            width: 100%;
        }

        .imgs ul {
            width: 100%;
        }

        .imgs ul li:not(.clear) {
            width: 155px;
            float: left;
            padding: 2px;
            height: 160px;
            overflow: hidden;
        }

        .imgs ul li img {
            width: 100%;
        }

        .address {
            position: relative;
            height: 30px;
            margin-top: 10px;
            margin-bottom: 10px;
        }

        .address .left {
            font-size: 14px;
            background: url("${img}/address.png") no-repeat center left;
            background-size: 13px;
            padding-left: 20px;
        }

        .address .right {
            position: absolute;
            top: 0;
            right: 10px;
            text-align: right;
        }

        .address .right span {
            font-size: 14px;
            padding-left: 20px;
        }

        .address .right span.like {
            right: 30px;
            background: url("${img}/like.png") no-repeat center left;
            background-size: 15px;
            margin-right: 15px;
        }

        .address .right span.comment {
            right: 0;
            background: url("${img}/comment.png") no-repeat center left;
            background-size: 15px;
        }

        .likelist {
            position: relative;
            height: 75px;
            overflow: hidden;
        }

        .likelist ul {
            width: 100%;

        }

        .likelist ul li:not(.clear) {
            width: 40px;
            height: 40px;
            overflow: hidden;
            float: left;
            margin: 4px;
        }

        .likelist ul li img {
            width: 100%;
            border-radius: 60px;
        }

        .likelist .likeCount {
            font-size: 14px;
            padding-left: 2px;
            margin-bottom: 5px;
        }

        .commentCount {
            margin-top: 5px;
            margin-bottom: 15px;
        }

        .clear {
            clear: both
        }
    </style>
</head>
<body>
<div class="head">
    <img src="${circle.user.pic}" alt="头像">
    <div class="right">
        <span class="username top">${circle.user.nick}</span>
        <span class="username bottom"><fmt:formatDate value="${circle.createTime}"
                                                      pattern="yyyy-MM-dd HH:mm:ss"/></span>
    </div>
</div>
<c:if test="${not empty images}">
    <div class="imgs">
        <ul>
            <c:forEach var="image" items="${images}">
                <li><img src="${image}" alt="1"></li>
            </c:forEach>
            <li class="clear"></li>
        </ul>
    </div>
</c:if>
<div class="path"></div>
<div class="address">
    <div class="left">${circle.address}</div>
    <div class="right">
        <span class="like">${circle.likeCount}</span>
        <span class="comment">${circle.commentCount}</span>
    </div>
</div>
<%--点赞人列表--%>
<c:if test="${not empty likeList}">
    <div class="likelist">
        <div class="likeCount">
                ${circle.likeCount}人点赞
        </div>
        <ul>
            <c:forEach items="${likeList}" var="like">
                <li><img src="${like.pic}" alt=""></li>
            </c:forEach>
        </ul>
    </div>
</c:if>
<%--评论列表--%>
<c:if test="${not empty commentList}">
    <div class="commentList">
        <div class="commentCount">
                ${circle.commentCount}条评论
        </div>
            <%--列表--%>
        <c:forEach items="${commentList}" var="comment">
            <div class="comment">
                <img src="${comment.pic}" alt="" class="userPic">
                <span class="conten">${comment.content}</span>
                <span class="time"><fmt:formatDate value="${comment.createTime}" pattern="yyyy-MM-dd HH:mm:ss"/></span>
                <div>
                    回复 <span class="replyedUserName">123</span>： <span class="replyedContent">呵呵</span>
                </div>
            </div>
        </c:forEach>
    </div>
</c:if>
</body>
</html>